<template>
  <div class="alarm_info">
    <el-header v-show="true"
               style="text-align: left;height: 35px;font-family: 华文行楷;font-size: 20px;padding-left: 3px;margin-bottom: 6px">历史告警详情信息
      <el-button type="danger" size="mini" plain @click="getAlarm" style="background-color: #FFAAAA;">刷新</el-button>
      <el-button type="danger" size="mini" plain @click="getAlarm" style="background-color: #FFAAAA;">同步</el-button>
    </el-header>
    <el-table
        :data="alarmTableData.alarms.alarms.alarm"
        stripe
        height="900"
        style="width: 100%">
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-row>
              <el-col :span="12" class="expanded_context_class">
                <el-form-item label="网元">
                  <span>{{ props.row.device }}</span>
                </el-form-item>
                <el-form-item label="告警来源">
                  <span>{{ props.row['object-name'] }}</span>
                </el-form-item>
                <el-form-item label="告警名称">
                  <span>{{ props.row['alarm-code'] }}</span>
                </el-form-item>
                <el-form-item label="告警类型">
                  <span>{{ props.row['object-type'] }}</span>
                </el-form-item>

                <el-form-item label="处理建议">
                  <span>{{ props.row.suggest }}</span>
                </el-form-item>

                <el-form-item label="告警级别">
                  <span>{{ props.row['perceived-severity'] }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12" class="expanded_context_class">
                <el-form-item label="告警状态">
                  <span>{{ props.row['alarm-state'] }}</span>
                </el-form-item>
                <el-form-item label="开始时间">
                  <span>{{ props.row['start-time'] }}</span>
                </el-form-item>
                <el-form-item label="清除时间">
                  <span>{{ props.row['start-time'] }}</span>
                </el-form-item>
                <el-form-item label="确认状态">
                  <span>{{ props.row.ack }}</span>
                </el-form-item>
                <el-form-item label="确认人">
                  <span>{{ props.row.ackUser }}</span>
                </el-form-item>
                <el-form-item label="确认时间">
                  <span>{{ props.row['start-time'] }}</span>
                </el-form-item>
              </el-col>
            </el-row>


          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">确认
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">忽略
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="device"
          label="网元">
      </el-table-column>


      <el-table-column
          prop="object-name"
          label="告警来源">
      </el-table-column>
      <el-table-column
          prop="alarm-code"
          label="告警名称">
      </el-table-column>
      <el-table-column
          prop="object-type"
          label="类型">
      </el-table-column>
      <el-table-column
          prop="perceived-severity"
          label="告警级别">
      </el-table-column>
      <el-table-column
          prop="alarm-state"
          label="告警状态">
      </el-table-column>
      <el-table-column
          prop="start-time"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="start-time"
          label="确认时间">
      </el-table-column>
      <el-table-column
          prop="ackUser"
          label="确认用户">
      </el-table-column>


    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HistoricalAlarms",
  data() {
    return {
      //告警相关
      alarmTotal: '',
      CriticalNum: 0,
      MajorNum: 0,
      MinorNum: 0,
      WarningNum: 0,
      alarmTableData: {
        alarms: {
          alarms: {
            alarm:
                [
                  {
                    "device": 'OTNA',
                    ack: true,
                    "alarm-serial-no": 22,
                    "object-name": "机架1_槽道1_端口1",
                    "object-type": "PTP",
                    "alarm-code": "ODUK_PM_SSF",
                    "perceived-severity": "major",
                    "start-time": "2022-06-05T04:57:51.286Z",
                    "end-time": "2022-06-05T04:57:52.450Z",
                    "alarm-state": "end",
                    ackUser: '管理员',
                    suggest: 'Waiting for recovery ',
                  },
                  {
                    "device": 'OTNA',
                    ack: false,
                    "alarm-serial-no": 23,
                    "object-name": "机架1_槽道1_端口2",
                    "object-type": "PTP",
                    "alarm-code": "ODUK_PM_SSF",
                    "perceived-severity": "major",
                    "start-time": "2022-06-05T04:57:51.286Z",
                    "end-time": "2022-06-05T04:57:52.450Z",
                    "alarm-state": "end",
                    ackUser: '操作员',
                    suggest: 'Waiting for recovery ',
                  },
                ]
          }
        }
      }
    }
  },
  methods: {
    getNodeList() {
      axios.get('/list/nodes').then(
          response => {
            console.log("请求成功", response.data);
            this.nodeList = response.data;
          },
          error => {
            console.log("失败！", error.message)
            // this.$message.error(error.message);
          }
      )
    },
    getAlarm() {
      this.getNodeList();
      console.log("长度是： ", this.nodeList.length)
      console.log(this.nodeList[0]['node-id'])
      let m_flag = -1;
      for (let i = 0; i < this.nodeList.length; i++) {
        console.log("处于连接状态的节点： ", this.nodeList[i]['node-id'])
        axios.get('/node/' + this.nodeList[i]['node-id'] + '/alarms&tcas').then(
            response => {
              this.alarmTotal++;
              m_flag = 1;
              console.log("告警信息", response.data);
              this.alarmTableData = response.data;

              for (let j = 0; j < this.alarmTableData.alarms.alarms.alarm.length; j++) {

                this.alarmTableData.alarms.alarms.alarm[j].device = this.nodeList[i]['node-id'];
              }

              // this.$message.success("设备列表信息更新成功");
            },
            error => {
              m_flag = 0;
              console.log("失败！！", error.message)
              // this.$message.error(error.message);
            }
        )
      }

      if (m_flag) {
        // this.alarmTotal = this.alarmTableData.alarms.alarms.alarm.length;
        this.$message.success("告警信息更新成功");

        this.analyzeAlarmLevel();

        console.log("2345678")

      } else {
        this.$message.error("更新失败");
      }
    },
  }
}
</script>

<style>
.expanded_context_class > .el-form-item > .el-form-item__content {
  line-height: 60px !important;
}

.expanded_ptp_class > .el-form-item > .el-form-item__content {
  line-height: 60px !important;
}

</style>